<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>订单列表</title>
    <link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
    <link href="../../css/bootstrap-datetimepicker.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/all-like-orderlist.css">
    <link rel="stylesheet" href="../../css/people.css">
    <link rel="stylesheet" href="../../css/jquery.pagination.css">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.js"></script>
    <!--引入时间插件-->
    <script src="../../js/moment-with-locals.min.js"></script>
    <script src="../../js/bootstrap-datetimepicker.js"></script>
    <script>
        $(document).ready(function() {
            $("#datetimepicker").datetimepicker({
                format: "yyyymm",
                weekStart: 1,
                autoclose: true,
                startView: 3,
                minView: 3,
                forceParse: false,
                endDate: new Date(), // 窗口可选时间从今天开始
                pickerPosition: "bottom-left"
            });
            $("#datetimepicker2").datetimepicker({
                format : "yyyymm",
                weekStart : 1,
                autoclose : true,
                startView : 3,
                minView : 3,
                forceParse : false,
                endDate : new Date(), // 窗口可选时间从今天开始
                pickerPosition : "bottom-left"

            });

        })
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="solid-hr row"></div>
    <div class="operation row">
        <button class="btn delete delbtn col-md-1" onclick="idDelete()" ><img src="../../images/delete01.png" alt="">批量删除</button>
        <button class="btn btn-success distribute col-md-1" data-toggle="modal" data-target="#exampleModal"><img src="../../images/add.png" alt="">添加</button>
        <form class="select-option col-md-6">
            <input id="user" class="order-num" type="text"  placeholder="请输入用户名">
            <input type="button" onclick="selectUsername()" class="btn btn-success sub" value="查询">
        </form>
    </div>
    <!--表格-->
    <div class="table-list row">
        <table class="table table-bordered">
            <thead>
            <tr class="active">
                <td><input  onclick="AAA('ck')" type="checkbox"></td>
                <td>用户名</td>
                <td>手机号</td>
                <td>余额</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="tb">
            <span th:each="p : ${pagination.list}">
            <tr>
                <td><input name="ck" type="checkbox" th:value="${p.id}"></td>
                <td th:text="${p.username}">hys20180716</td>
                <td th:text="${p.phone}">hys20180716</td>
                <td th:text="${p.balance}">张三</td>
                <td><img src="../../images/edit.png" data-toggle="modal" data-target="#exampleModal" onclick="lick(this, this.id)"/></td>
            </tr>
            </span>
            </tbody>
        </table>
    </div>
    <!--分页-->
    <div class="page-right">
        <div id="pagination3" class="page fl"></div>
    </div>
    <span th:text="${pagination.totalPage}"style="display: none"id="totalPage"></span>
    <!--修改弹框-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">用户信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <input type="hidden" class="form-control" id="id">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label"><i>*</i>用户名</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="balance" class="control-label"><i>*</i>电话号码</label>
                            <input type="text" class="form-control" id="phone" >
                        </div>
                        <div class="form-group">
                            <label for="balance" class="control-label"><i>*</i>余额</label>
                            <input type="text" class="form-control" id="balance" readonly>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-333" data-dismiss="modal" >取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateUser()">修改</button>
                </div>
            </div>
        </div>
    </div>
    <!--引入模态框和复选框js-->
    <script src="../../js/checkbox.js"></script>
    <script src="../../js/jquery.pagination.min.js"></script>
    <script>

        var totalPage = $("#totalPage").text();
        $("#pagination3").pagination({
            totalPage: totalPage,
            isShow: true,
            count: totalPage,
            homePageText: "首页",
            endPageText: "尾页",
            prevPageText: "上一页",
            nextPageText: "下一页",
            callback: function(current) {
                var Pagination  = {
                    currentPage : current-1,
                    size : 5,
                }
                if(current<= totalPage) {
                    var html = '';
                    $.ajax({
                        url: "/system/user",
                        contentType: "application/json; charset=utf-8",
                        type: "post",
                        data: JSON.stringify(Pagination),
                        success: function (data) {
                            console.log(data.list);
                            $(".old").css("display", "none");
                            $.each(data.list, function (n, val) {
                                html += " <tr>" +
                                    "<td><input name='ck' type='checkbox' value='" + val.id + "'></td>" +
                                    "<td>" + val.username + "</td>" +
                                    "<td>" + val.phone + "</td>" +
                                    "<td>" + val.balance + "</td>" +
                                    "<td><img src='../../images/edit.png' data-toggle='modal' data-target='#exampleModal' onclick='lick(this, this.id)'/></td>  " +
                                    "</tr>"
                            })
                            $("#tb").html(html);

                        },

                    });
                }
            }
        })
        //清除 span 提示文字
        function resetEdit() {
            document.getElementById("recipient-name").value = '';
            document.getElementById("balance").value = '';
            document.getElementById("phone").value = '';
            document.getElementById("id").value = '';
        }
        ;

        //隐藏编辑模态框时清除span
        $('#exampleModal').on('hide.bs.modal', function () {
            resetEdit();
        })
        function lick(obj, id) {
            var td_content = $(obj).parents("tr").children("td");  //获取当前行中的所有td值
            var id = td_content.eq(1).text(); //获取当前行第二个td的值
            var phone = td_content.eq(2).text();
            var name = td_content.eq(3).text(); //获取当前行第二个td的值

            document.getElementById('recipient-name').value = id;
            document.getElementById('balance').value = name;
            document.getElementById('phone').value = phone;
            document.getElementById('id').value = 2;
        }
        function selectUsername() {
            var username = $("#user").val();
            if(username != ""){
            var Pagination = {
                username : username
            }
            $.ajax({
                url:"/system/selectUsername",
                contentType:"application/json; charset=utf-8",
                type:"post",
                data : JSON.stringify(Pagination),
                success:function(data){
                    console.log(totalPage);
                    $(".old").css("display","none");
                    var html = "";
                    $.each(data,function (n,val) {
                        html += " <tr>" +
                            "<td><input name='ck' type='checkbox' value='"+ val.id+"'></td>"+
                            "<td>"+val.username+"</td>"+
                            "<td>"+val.phone+"</td>"+
                            "<td>"+val.balance+"</td>"+
                            "<td><img src='../../images/edit.png' data-toggle='modal' data-target='#exampleModal' onclick='lick(this, this.id)'/></td>  "+
                            "</tr>"
                    })
                    $("#tb").html(html);

                },

            });}else{
                window.location.href="/system/user";
            }
        }
        function updateUser() {
            // 标志变量
           var i = $("#id").val();
            var username = $("#recipient-name").val();
            var phone = $("#phone").val();
            var Pagination = {
                username : username,
                phone : phone
            }
           if(i == 2){
               $.ajax({
                   url:"/system/updateUser",
                   contentType:"application/json; charset=utf-8",
                   type:"post",
                   data : JSON.stringify(Pagination),
                   success:function(data){
                       if(data = "SUCCESS"){
                           alert("操作成功");
                           window.location.href="/system/user"
                       }else{
                           alert("操作失败");
                       }
                   }
               });
           }else {
               $.ajax({
                   url:"/system/addUser",
                   contentType:"application/json; charset=utf-8",
                   type:"post",
                   data : JSON.stringify(Pagination),
                   success:function(data){
                       if(data = "SUCCESS"){
                           alert("操作成功");
                           window.location.href="/system/user"
                       }else{
                           alert("操作失败");
                       }
                   }
               });
           }
        }
        function idDelete() {
            var ids = [];
            var i = 0;
            $.each($(' input:checkbox:checked'),function(){
                if($(this).val() != "on"){
                    ids[i] = $(this).val();
                    i++;}
            });
            var Pagination = {
                ids : ids
            }
            $.ajax({
                url:"/system/deleteUsername",
                contentType:"application/json; charset=utf-8",
                type:"post",
                data : JSON.stringify(Pagination),
                success:function(data){
                    if(data = "SUCCESS"){
                        alert("删除成功");
                        window.location.href="/system/user"
                    }else{
                        alert("删除失败");
                    }
                }
            });
        }
    </script>
</div>
</body>
</html>